<template>
  <div class="top-status-bar">
    <h1>
      <span>智能运维平台</span>
    </h1>
    <nav>
      <ul>
        <li>
          <router-link
            to="/realtime-monitoring"
            :class="{ active: $route.path === '/realtime-monitoring' }"
            >实时监控</router-link
          >
        </li>
        <li :class="{ active: $route.path === '/anomaly-detection' }">
          <router-link to="/anomaly-detection">智能运维</router-link>
        </li>
        <li>
          <router-link to="/risk-warning" :class="{ active: $route.path === '/risk-warning' }"
            >风险预警</router-link
          >
        </li>
        <li>
          <router-link
            to="/operation-handling"
            :class="{ active: $route.path === '/operation-handling' }"
            >操作处置</router-link
          >
        </li>
        <li><i class="fas fa-user-circle"></i> 退出登录</li>
      </ul>
    </nav>
  </div>

  <div class="main-container">
    <SideNav class="sidenav" />

    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SideNav from './components/AnomalyDetection/SideNav.vue'
// 导入 useRoute 钩子，用于获取当前路由信息
import { useRoute } from 'vue-router'

const route = useRoute() // 获取当前路由实例

// 这里的 activeNav 逻辑可以直接通过 $route.path 来判断
// 比如顶部导航的高亮可以直接绑定到 $route.path

// SideNav 组件中，其内部的导航链接也应该使用 router-link
</script>

<style>
/* 导入全局样式 */
@import './assets/style.css';

/* 路由器链接的默认样式，可能需要覆盖 */
a {
  text-decoration: none;
  color: inherit; /* 继承父元素的颜色 */
}

a.router-link-exact-active {
  /* Vue Router 默认给当前激活的链接添加的类 */
  /* 可以为激活状态的链接添加额外样式 */
}

.sidenav {
  height: 100vh;
}
</style>
